<template>
  <div id="data-type"></div>
</template>

<script>
import echarts from '../../lib/echarts'

export default {
  name: "DataAnalyzeType",
  components: {},
  data() {
    return {
      title: ['评分', '平均值'],
      indicatorList: [
        {name: '情绪状态', max: 38000},
        {name: '学习状态', max: 52000},
        {name: '精力状态', max: 25000}
      ],
      dataList: [
        {
          value: [30000, 43000, 18000],
          name: '评分'
        },
        {
          value: [28000, 32000, 21000],
          name: '平均值'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.initial();
  },
  methods: {
    initial() {
      var myChart = echarts.init(document.getElementById('data-type'));
      myChart.setOption({
        tooltip: {},
        color: ["#F6416C", "#28C76F", "#736EFE"],
        legend: {
          data: this.title
        },
        radar: {
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#ea8636',
              borderRadius: 3,
              padding: [4, 5]
            }
          },
          center: ['50%', '60%'],
          axisLine: {
            lineStyle: {
              color: '#F6CEEC'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#F6CEEC'
            }
          },
          splitArea: {
            areaStyle: {
              color: '#EAF7FF',
              shadowColor: 'aqua'
            }
          },
          indicator: this.indicatorList
        },
        series: [{
          type: 'radar',
          areaStyle: {
            normal: {
              itemStyle: {
                emphasis: {
                  color: "#56e5c7",
                  lineStyle: {
                    width: 4
                  }
                }
              },
            }
          },
          data: this.dataList
        }]
      })
    }
  }
}
</script>

<style scoped>
#data-type {
  width: 100%;
  height: 100%;
}
</style>
